<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作样式</title>

    <style>

        .box1 {
            width: 100px;
            height: 100px;
            background-color: #af45f8;
        }
    </style>

</head>
<body>
    <button id="butt">点击</button>
    <button id="butt2">点击2</button>
    <br>
    <div class="box1">



    </div>
</body>


<script type="text/javascript">



    let butt = document.querySelector("#butt");
    let butt2 = document.querySelector("#butt2");
    let box1 = document.querySelector(".box1");

    butt.onclick = function () {

        //修改box1的宽度
        /*
         * 通过JS修改元素的样式：
         * 	语法：元素.style.样式名 = 样式值
         *
         * 注意：如果CSS的样式名中含有-，
         * 		这种名称在JS中是不合法的比如background-color
         * 		需要将这种样式名修改为驼峰命名法，
         * 		去掉-，然后将-后的字母大写
         *
         * 我们通过style属性设置的样式都是内联样式，
         * 	而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
         *
         * 但是如果在样式中写了!important，则此时样式会有最高的优先级，
         * 	即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效
         * 	所以尽量不要为样式添加!important
         *
         *
         *
         */


        box1.style.width = "300px";
        box1.style.height = "400px";
        box1.style.backgroundColor = "red";

    }

    butt2.onclick = function () {
        //读取box1的样式
        /*
         * 	语法：元素.style.样式名
         *
         * 通过style属性设置和读取的都是内联样式
         * 	无法读取样式表中的样式
         */
        //alert(box1.style.height);
        alert(box1.style.width);
    }

</script>
</html>